import { G2, Chart, Line, Coordinate, Area, Point, Axis } from 'bizcharts';
import { Card } from 'antd';

const data = [
  {
    x: '01',
    z: 0.0182248,
    y: 0.0050545,
  },
  {
    x: '02',
    z: 0.0236262,
    y: 0.0038931,
  },
  {
    x: '03',
    z: 0.0213268,
    y: 0.0051801,
  },
  {
    x: '04',
    z: 0.0187883,
    y: 0.0061127,
  },
  {
    x: '05',
    z: 0.0354537,
    y: 0.007793,
  },
  {
    x: '06',
    z: 0.0223075,
    y: 0.0054601,
  },
  {
    x: '07',
    z: 0.0210527,
    y: 0.0049302,
  },
  {
    x: '08',
    z: 0.0241134,
    y: 0.0051116,
  },
  {
    x: '09',
    z: 0.0350703,
    y: 0.0052361,
  },
  {
    x: '10',
    z: 0.0247175,
    y: 0.0033643,
  },
  {
    x: '11',
    z: 0.0238392,
    y: 0.0042098,
  },
  {
    x: '12',
    z: 0.0225599,
    y: 0.0029848,
  },
];

const scale = {
  y: { min: 0 },
  nums: {
    alias: '数量',
  },
};

const randomHex = () =>
  `#${Math.floor(Math.random() * 0xffffff)
    .toString(16)
    .padEnd(6, '0')}`;

const DealActivityLine = (props) => {
  return (
    <>
      <Chart
        height={240}
        padding={[20, 10, 40, 10]}
        data={data}
        autoFit
        scale={scale}
        defaultInteractions={[]}
      >
        <Line position="x*y" color="#0a73ff" />
        <Point
          position="x*y"
          style={[
            'x*y*z',
            (year, value, marked) => {
              console.log('marked', marked);
              return {
                fill: randomHex(),
              };
            },
          ]}
        />
        <Axis name="y" grid={null} label={null} />
        <Axis
          name="x"
          grid={null}
          tickLine={null}
          label={{
            style: {
              fill: 'white', // 文本的颜色
            },
          }}
        />
      </Chart>
    </>
  );
};
export default DealActivityLine;
